<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <title>苹果大数据应用平台</title>
  <link rel="stylesheet" href="../Lib/iconfont/iconfont.css" />
  <link rel="stylesheet" href="../Lib/scroll/jquery.scrollbar.css" />
  <link rel="stylesheet" href="../css/common.css" />
  <script src="../Lib/jquery-1.12.4.min.js"></script>
  <script src="../Lib/time-scrollbar.js"></script>
  <script src="../Lib/scroll/jquery.scrollbar.min.js"></script>
  <style>
    .topTitle-consume {
      position: absolute;
      top: 0;
      left: 0;
      width: 12%;
    }

    .topTitle-consume .spec {
      border-bottom: 1px solid #ccc;
      text-align-last: left;
      line-height: 30px;
    }

    .topTitle-consume .spec #totalNum {
      font-size: 30px;
      font-weight: bold;
      margin-right: 5px;
      background-image: -webkit-linear-gradient(top, #00e9ff, #057cff);
      background-image: -moz-linear-gradient(top, #00e9ff, #057cff);
      -webkit-background-clip: text;
      -moz-background-clip: text;
      -webkit-text-fill-color: transparent;
      -moz-text-fill-color: transparent;
    }

    .topTitle-consume .spec_txt {
      text-align-last: left;
      line-height: 30px;
    }
  </style>
</head>

<body class="consume_channel">
  <div class="head">
    <h3 class="title">
        <div class="logo icon-logo"></div>
        <div class="line"></div>
        <div class="name">苹果大数据应用平台</div>
    </h3>
    <div class="navigation">
        <ul class="nav">
            <li class="nav-item index"><a href="index.html">首页</a></li>
            <li class="nav-item apple-product"><a href="apple_product.html">苹果生产</a></li>
            <li class="nav-item apple-consume"><a href="consume_situation.html">苹果消费</a></li>
            <li class="nav-item commerce"><a href="trade_situation.html">对外贸易</a></li>
            <li class="nav-item market-price"><a href="price_monitor.html">市场价格</a></li>
            <li class="nav-item cost-income"><a href="income_cost.html">成本收益</a></li>
        </ul>
        <div class="profile">
            <button><i class="iconfont icon-yonghu"></i></button>
            <button><i class="iconfont icon-shezhi"></i></button>
            <button><i class="iconfont icon-tuichu"></i></button>
        </div>
    </div>
</div>

  <div class="wrapper">
    <div class="nav-bar-bg">
    <dl class="nav-bar">
        <dt class="navbar-item consume_situation">
            <h2><i class="iconfont icon-consume_situation"></i><a href="consume_situation.html">消费现状</a><i class="iconfont icon-arrowright"></i></h2>
            <ul>
                <li><a href="#consume_situation_消费总量">消费总量</a></li>
                <li><a href="#consume_situation_消费结构">消费结构</a></li>
                <li><a href="#consume_situation_消费水平">消费水平</a></li>
            </ul>
        </dt>
        <dt class="navbar-item consume_supplydemand">
            <h2><i class="iconfont icon-consume_supplydemand"></i><a href="consume_supplydemand.html">供求分析</a><i class="iconfont icon-arrowright"></i></h2>
            <ul>
                <li><a href="#consume_supplydemand_供求现状">供求现状</a></li>
                <li><a href="#consume_supplydemand_供求与价格">供求与价格</a></li>
                <li><a href="#consume_supplydemand_供求预测">供求预测</a></li>
                <li><a href="#consume_supplydemand_需求影响因素">需求影响因素</a></li>
            </ul>
        </dt>
        <dt class="navbar-item price_market">
            <h2><i class="iconfont icon-liutong"></i><a href="price_market.html">市场流通</a><i class="iconfont icon-arrowright"></i></h2>
            <ul>
                <li><a href="#price_market_流向监测">流向监测</a></li>
                <li><a href="#price_market_流向分析">流向分析</a></li>
            </ul>
        </dt>
        <dt class="navbar-item consume_channel">
            <h2><i class="iconfont icon-consume_channel"></i><a href="consume_channel.html">消费渠道</a><i class="iconfont icon-arrowright"></i></h2>
            <ul>
                <li><a href="#consume_channel_渠道分布">渠道分布</a></li>
                <li><a href="#consume_channel_渠道销量">渠道销量</a></li>
                <li><a href="#consume_channel_渠道特征">渠道特征</a></li>
            </ul>
        </dt>
        <dt class="navbar-item consume_blueprint">
            <h2><i class="iconfont icon-consume_blueprint"></i><a href="consume_blueprint.html">产品画像</a><i class="iconfont icon-arrowright"></i></h2>
            <ul>
                <li><a href="#consume_blueprint_产地偏好">产地偏好</a></li>
                <li><a href="#consume_blueprint_特产品类热度">特产品类热度</a></li>
                <li><a href="#consume_blueprint_档次偏好">档次偏好</a></li>
                <li><a href="#consume_blueprint_交叉组合偏好">交叉组合偏好</a></li>
                <li><a href="#consume_blueprint_产品品牌热度">产品品牌热度</a></li>
            </ul>
        </dt>

    </dl>
</div>

    <div class="cont">
      <div id="consume_channel_渠道分布" class="section channel-fenbu">
        <div class="sec-top">
          <h3 class="pub-title">渠道分布</h3>
          <div class="else">
            <!-- <ul class="pub-radio">
              <li class="active">电商</li>
            <li>批发市场</li>
            </ul> -->
            <div class="help">
              <button><i class="iconfont icon-wenhao"></i></button>
              <div class="help-ct">
                <div class="diy-scroll">
                  <p class='help-title'>（1）数据来源</p>
                  <p>电商品台、农业部</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sec-ct">
          <div>
            <div class="sec-part" style="position: relative;">
              <div id="space-distributed" class="one">
                <div class="topTitle-consume">
                  <div class="spec"><span id="totalNum">10000</span>家</div>
                  <div class="spec_txt">电商网店样本数量</div>
                </div>
                <!-- <div style="overflow:hidden; display: flex;"> -->
                <div class="map special-height echart-box" id="map" style="width: 100%!important"></div>

                <div class="right-echart special-height" style="width: 25%!important; position: absolute; right: 0; top: 0; z-index: 101;">
                    <h3 class="description"><span class="year">2016</span><span>全国网店分布排名</span></h3>
                    <div class="echart-ct opacity">
                        <div id="front-ten" class="echart-box calc-height-two"></div>
                    </div>
                    <button class="toggle-down"><i class="iconfont icon-shouqi"></i></button>
                </div>
                <!-- </div> -->

              </div>
            </div>
            <div class="tooltip"></div>
            <div id="country-flow-time" style="z-index: 99;"></div>
          </div>
        </div>
      </div>
      <div id="consume_channel_渠道销量" class="section channel-xiaoliang">
        <div class="sec-top">
          <h3 class="pub-title">渠道销量</h3>
          <div class="pub-time">
            <dl class="fixtime">
              <div class="time-des">时间：</div>
              <div class="time-txt">2017</div>
            </dl>
            <div class="another-time">
              <ul class="time-list scrollbar-inner">
                <li class="month-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2017</span>
              </label>
                </li>
                <li class="month-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2016</span>
              </label>
                </li>
                <li class="month-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2015</span>
              </label>
                </li>
                <li class="month-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2014</span>
              </label>
                </li>
                <li class="month-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2013</span>
              </label>
                </li>
                <li class="time-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2015-2017</span>
              </label>
                </li>
                <li class="time-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2010-2014</span>
              </label>
                </li>
                <li class="time-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2005-2009</span>
              </label>
                </li>
                <li class="time-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2000-2004</span>
              </label>
                </li>
                <li class="time-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>1995-1999</span>
              </label>
                </li>

              </ul>
              <div class="yesorno-btn">
                <button class="time-yes" style="margin-right: 8px;">确认</button>
                <button class="time-no">清除</button>
              </div>
            </div>
          </div>

          <div class="else">
            <ul class="pub-radio">
              <li class="active">月度</li>
              <li>年度</li>
            </ul>
            <div class="help">
              <button><i class="iconfont icon-wenhao"></i></button>
              <div class="help-ct">
                <div class="diy-scroll">
                  <p class='help-title'>（1）数据来源</p>
                  <p>电商平台、农业部</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sec-ct">
          <div>
            <div class="sec-part">
              <div id="xiaoliang" class="echart-box"></div>
            </div>
          </div>
        </div>
      </div>
      <div id="consume_channel_渠道特征" class="section channel-tezheng">
        <div class="sec-top">
          <h3 class="pub-title">渠道特征</h3>
          <div class="pub-time">
            <dl class="fixtime">
              <div class="time-des">时间：</div>
              <div class="time-txt">2017</div>
            </dl>
            <div class="another-time">
              <ul class="time-list scrollbar-inner">
                <li class="month-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2017</span>
              </label>
                </li>
                <li class="month-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2016</span>
              </label>
                </li>
                <li class="month-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2015</span>
              </label>
                </li>
                <li class="month-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2014</span>
              </label>
                </li>
                <li class="month-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2013</span>
              </label>
                </li>
                <li class="time-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2015-2017</span>
              </label>
                </li>
                <li class="time-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2010-2014</span>
              </label>
                </li>
                <li class="time-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2005-2009</span>
              </label>
                </li>
                <li class="time-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>2000-2004</span>
              </label>
                </li>
                <li class="time-item">
                  <label>
                  <input type="checkbox" name="">
                  <i class="checkbox iconfont"></i>
                  <span>1995-1999</span>
              </label>
                </li>

              </ul>
              <div class="yesorno-btn">
                <button class="time-yes" style="margin-right: 8px;">确认</button>
                <button class="time-no">清除</button>
              </div>
            </div>
          </div>

          <div class="else">
            <ul class="pub-radio">
              <li class="active">月度</li>
              <li>年度</li>
            </ul>
            <div class="help">
              <button><i class="iconfont icon-wenhao"></i></button>
              <div class="help-ct">
                <div class="diy-scroll">
                  <p class='help-title'>（1）数据来源</p>
                  <p>电商平台、农业部</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sec-ct">
          <div>
            <div class="sec-part">
              <div id="tz1" class="echart-box" style="width:50%">12</div>
              <div id="tz2" class="echart-box" style="width:50%">33</div>
            </div>
            <div id="analyze-timeCDPH" class="time-control"></div>
          </div>
        </div>
      </div>
    </div>


  </div>

  <!-- 图片背景 -->
<div class="body-bg">
    <img src="../images/bg_body.jpg">
</div>

  <script src="../Lib/Echarts/echarts.common.min.js"></script>
  <script src="../Lib/Echarts/echarts-engine.js"></script>
  <script src="../js/public.js"></script>
  <script src="../Lib/Echarts/china.js"></script>
  <script src="../js/unite.js"></script>
  <script src="../js/consume_channel.js"></script>
</body>

</html>
